<template>
  <el-dropdown trigger="click" @command="changeLanguage">
    <i class="iconfont icon-zhongyingwen toolBar-icon"></i>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="item in languageList"
          :key="item.value"
          :command="item.value"
          :disabled="language === item.value"
        >
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { computed } from "vue";
import actions from '../../stores/globalState';

const language = computed(() => (actions as any).getGlobalState().language);

const languageList = [
  { label: "简体中文", value: "zh-CN" },
  { label: "English", value: "en" }
];

const changeLanguage = (lang: string) => {
  actions.setGlobalState({ language: lang });
};
</script>

<script lang="ts">
export default {
  name: 'Language'
};
</script>

<style scoped>
.toolBar-icon {
  cursor: pointer;
  font-size: 18px !important;
  color: var(--el-text-color-primary) !important;
  transition: color 0.3s;
}

.toolBar-icon:hover {
  color: var(--el-color-primary) !important;
}
</style>
